<script setup lang="ts">
import { removeToken } from "@@/utils/cache/cookies.ts"
// import { getUserName} from "@@/utils/cache/cookies.ts"
import { shallowReactive } from "vue"
import Swiper from "@/pages/index/Swiper.vue"
import { useUserStore } from "@/pinia/stores/user"
import { getIndexFourNewsListApi, getIndexFourBannerApi } from "@/api"
import "swiper/swiper-bundle.css"
import "swiper/css/pagination"
import Header from "@@/components/Head/index.vue";
import Footer from "@@/components/footer/index.vue"
const token = ref("")
const username = ref("")
const userStore = useUserStore()
const images = ref<any[]>([])
const fourNewsList = ref<any[]>([])
const fourBannerList = ref<any[]>([])
const router = useRouter()
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  username.value = userStore.getUserName().value
  token.value = userStore.token
  console.log(`getToken-${token.value}`)
  console.log(username.value)
  loadImages()
  getFourNews()
})
const effects = ['slide']
const creativeEffects = [
  {
    prev: {
      shadow: true,
      translate: [0, 0, -400]
    },
    next: {
      translate: ["100%", 0, 0]
    }
  }
]
const currentSlide = ref(0)

const logout = () => {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}

const navigation = shallowReactive<{ [key: string]: any }>({})
function onBroadcastSwiper(swiper: any) {
  navigation.prevEl = swiper.navigation.prevEl
  navigation.prevEl.style.display = "block"
  navigation.nextEl = swiper.navigation.nextEl
  navigation.nextEl.style.display = "block"
}
function getFourNews() {
  getIndexFourNewsListApi({page:1, limit:4}).then(res => {
    if(res.code == 0 && res.data.length > 0) {
      // 循环添加数据
      for (let i in res.data) {
        fourNewsList.value.push(res.data[i])
      }
    }
  })
}
function goDetail(id: number) {
  window.open(router.resolve({ name: 'newsDetail', params: { id} }).href, '_blank');
}

function loadImages() {
  getIndexFourBannerApi({page:1, limit:4, area: 2}).then(res => {
    // 循环添加数据
    for (let i in res.data) {
      fourBannerList.value.push(res.data[i])
      images.value.push({
        title: res.data[i].title,
        link: res.data[i].visit_link,
        src: res.data[i].img
      })
    }
  })
}
</script>

<template>
  <div class="login-container">
    <Header :activeId="0" />
    <div class="login-card">
          <Flex vertical gap="middle">
            <Swiper
              :images="images"
              mode="banner"
              :pagination="{
                dynamicBullets: true,
                clickable: true
              }"
              :height="320"
              :slides-per-view="1"
              :space-between="0"
              navigation
              mousewheel
              @swiper="onBroadcastSwiper"
            />
          </Flex>
      <div class="module-container">
        <div class="module" v-for="item in fourNewsList">
          <div class="module-item">
            <div class="w-1200 module-sub">
              <div class="module-content">
                <div class="module-title" style="cursor: pointer;" @click="goDetail(item.id)">
                  {{item.title}}
                </div>
                <div class="module-desc" style="cursor: pointer;" @click="goDetail(item.id)">
                  <p>
                    {{item.description}}
                  </p>
                </div>
                <div class="module-more" @click="goDetail(item.id)">
                  <img src="" alt="" class="home-arrow"><span class="desc">了解详情</span>
                </div>
              </div>
              <div class="module-pic" style="cursor: pointer;" @click="goDetail(item.id)">
                <img :src="item.img" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<style lang="scss" scoped>
.w-1200 {
  width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.module-container {
  width: 100%;
}
.user {
  width: 160px;
}
.module .module-sub {
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.module-pic {
  width: 480px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-pic img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}
.module:nth-child(even) .module-sub .module-pic {
  margin-right: 64px;
}
.module:nth-child(odd) .module-sub .module-pic {
  margin-left: 64px;
}
.module:nth-child(even) .module-sub {
  flex-direction: row-reverse;
}
.module:nth-child(3) .module-item {
  background-image: url(@@/assets/images/layouts/module-bg04.png);
  background-repeat: repeat;
  background-size: 100%;
}
.module:nth-child(2) .module-item {
  background-image: url(@@/assets/images/layouts/module-bg03.png);
  background-repeat: repeat;
  background-size: 100%;
}
.module:nth-child(1) .module-item {
  background-image: url(@@/assets/images/layouts/module-bg02.png);
  background-repeat: repeat;
  background-size: 100%;
}
.module:nth-child(4) .module-item {
  background-image: url(@@/assets/images/layouts/module-bg01.png);
  background-repeat: repeat;
  background-size: 100%;
}
.module {
  margin-top: 32px;
}
.module .module-sub {
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.module .module-content .module-title {
  width: 566px;
  font-size: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left!important
}
.module .module-content .module-desc {
  width: 566px;
  font-family: MiSans;
  font-size: 16px;
  color: #7c7c7c;
  line-height: 28px;
  text-align: left;
  margin-top: 30px
}
.module .module-content .module-more {
  font-family: MiSans;
  font-size: 24px;
  line-height: 32px;
  margin-top: 20px;
  cursor: pointer;
  color: #45a1ff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
}
.module .module-content .module-more .home-arrow {
  width: 24px;
  height: 24px;
}
.module .module-title {
  width: 566px;
  font-size: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left !important;
}
.module .module-more .desc {
  color: #00bcfb;
  font-size: 18px;
  margin-left: 6px;
}
.carousel {
  position: relative;
  width: 500px; /* 根据需要调整 */
  overflow: hidden;
}
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
  transition: opacity 0.5s ease;
  opacity: 0;
}
.carousel-item.active {
  opacity: 1;
}
.nav ul li a {
  font-family: MiSans;
  font-size: 18px;
  color: #000;
  line-height: 24px;
  cursor: pointer;
  text-decoration: none;
}
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  .header {
    width: 100%;
    height: 64px;
    .header-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .logo {
        width: 100px;
        height: 50px;
        line-height: 100%;
        padding: 0 10px;
      }
      .nav {
        width: 700px;
        display: flex;
        flex-direction: row;
        height: 100%;
        color: #0e0e0e;
      }
      .nav ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
      }
      .nav ul li {
        position: relative;
      }
      .user {
        line-height: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .noLogin {
          padding: 0 10px;
          margin-left: 10px;
          margin-right: 10px;
          .login {
            margin-left: 10px;
            margin-right: 10px;
            font-family: MiSans;
            font-size: 18px;
          }
          .register {
            margin-left: 10px;
            margin-right: 10px;
            font-family: MiSans;
            font-size: 18px;
            color: #000;
            line-height: 24px;
            cursor: pointer;
            text-decoration: none;
          }
        }
      }
    }
  }
  .theme-switch {
    position: fixed;
    top: 5%;
    right: 5%;
    cursor: pointer;
  }
  .login-card {
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 0 10px #dcdfe6;
    background-color: var(--el-bg-color);
    overflow: hidden;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      img {
        height: 100%;
      }
    }
    .content {
      padding: 20px 50px 50px 50px;
      :deep(.el-input-group__append) {
        padding: 0;
        overflow: hidden;
        .el-image {
          width: 100px;
          height: 40px;
          border-left: 0px;
          user-select: none;
          cursor: pointer;
          text-align: center;
        }
      }
      .el-button {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
}
.footer {
  border-top: 2px solid rgba(0, 0, 0, 0.25);
}
.footer .footer-content {
  width: 1520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.footer h6 {
  font-family: MiSans;
  font-size: 14px;
  color: #000;
  line-height: 19px;
  margin-top: 31px;
}
.footer p {
  font-family: MiSans;
  font-size: 14px;
  color: #000;
  line-height: 19px;
  margin-top: 13px;
  cursor: pointer;
}
.footer .qcode {
  width: 110px;
  height: 110px;
  margin: 13px auto;
}
.footer .qcode img {
  display: block;
  width: 110px;
  height: 110px;
}
.carousel {
  position: relative;
  width: 500px; /* 根据需要调整 */
  overflow: hidden;
}
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
  transition: opacity 0.5s ease;
  opacity: 0;
}
.carousel-item.active {
  opacity: 1;
}
.nav1 a {
  font-size: 18px;
}
.nav1 a:hover {
  font-size: 18px;
}
</style>
